<!doctype html>
<html ondragstart="return false">
 <head>
     <meta charset="UTF-8">
     <meta name="Keywords" content="关键字">
     <meta name="Description" content="描述">
     <title>网页标题</title>
	 <style>
		
	*{
		margin:0;
		padding:0;
	}
	html,body{
		width:100%;
		height:100%;
	}
	  body{
	   font-size:12px;
	   font-family:"微软雅黑";
	   display:flex;
	   justify-content:center;
	   align-items:center;
	   background-color:#000033;
	  }
	  #box{
	  display:flex;
	  justify-content:center;
	  align-items:center;
		width:100px;
		height:100px;
		border-top:3px solid blue;
		border-bottom:3px solid transparent;
		border-radius:50%;
		background-color:transparent;
		color:#fff;
		position:relative;
		animation:circle 1s linear infinite ;
	  }
	  #box::before,#box::after{
		position:absolute;
		top:0;
		left:0;
		content:" ";
		width:100%;
		height:100%;
		border-top:3px solid red;
		border-radius:50%;
	  }
	  #box::before{
		transform:rotateZ(120deg);
	  }
	  #box::after{
		transform:rotateZ(-120deg);
	  }
	  #box span{
		animation:circle 1s linear infinite reverse;
	  }
	  @keyframes circle{
		from{
			transform:rotateZ(0deg);
		}
		to{
			transform:rotateZ(360deg);
		}
	  }
	 </style>
 </head>
 <body>
	<div id='box'>
		<span>loading</span>
	</div>
 </body>
</html>